<template>
  <div class="deep-design-confirm-container">
    <el-form ref="requestParams"
             :model="requestParams"
             label-width="100px">
      <el-col :span="8">
        <el-form-item label="关联项目名称">
          <el-input v-model="requestParams.project_name"
                    placeholder="请输入关联项目名称"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="所属单位">
          <el-input v-model="requestParams.company_name"
                    placeholder="请输入所属单位"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="状态">
          <el-select v-model="requestParams.status"
                     class="common-style"
                     clearable
                     placeholder="请选择">
            <el-option v-for="item in statusArr"
                       :key="item.value"
                       :label="item.name"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="创建时间">
          <el-date-picker v-model="timeArr"
                          type="daterange"
                          class="common-style"
                          @change="onTimeChange"
                          range-separator="-"
                          value-format="yyyy-MM-dd"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="8"
              :offset="8"
              class="condition-right-button">
        <el-button type="primary"
                   @click="onSearch">查询</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-col>
      <el-col :span="24">
        <el-table :data="tableData"
                  :highlight-current-row="true"
                  border
                  :header-cell-style="{ background: '#f5f5f5' }">
          <el-table-column type="index"
                           label="序号"
                           sortable
                           width="100"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="project_name"
                           label="关联项目名称"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="company_name"
                           label="所属单位"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="深化设计图纸"
                           align="center"
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <span @click="downOrLookDrawe(scope.row)"
                    class="down-or-look">{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="project_paper_version"
                           label="版本号"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="状态"
                           align="center"
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <span :class="getIsConfirm(scope.row)==1?'conf':'none-conf'">{{getIsConfirm(scope.row)==1?'已确认':'未确认'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="created_at"
                           label="创建时间"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作"
                           align="center"
                           width="120px">
            <template slot-scope="scope">
              <el-button type="text"
                         @click="onDeepPaperConfirm(scope.row)">深化图纸确认</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <el-pagination @current-change="handlePageChange"
                       @size-change="handleSizeChange"
                       :current-page="requestParams.page"
                       :page-size="requestParams.page_size"
                       layout="total,sizes,prev, pager, next, jumper"
                       :total="total"
                       align="center">
        </el-pagination>
      </el-col>
    </el-form> <!-- 查看PDF格式的文件 -->
    <el-dialog title="pdf格式的文件"
               :visible.sync="dialogVisible"
               width="60%"
               class="drawe-manage-pdf-style"
               :before-close="onBeforeClose">
      <DialogVisiblePdf :todosPdf="todosPdf"></DialogVisiblePdf>
    </el-dialog>
    <LookImgDialog v-if="lookImgDialog==true"
                   :lookImgDialog.sync="lookImgDialog"
                   :imgUrl.sync="imgUrl"></LookImgDialog>
    <DeepDesignConfirmDialog v-if="deepDesignConfimDialog==true"
                             :objRow.sync="objRow"
                             :catchBackFunc="catchBackFunc"
                             :deepDesignConfimDialog.sync="deepDesignConfimDialog"></DeepDesignConfirmDialog>
  </div>
</template>

<script>
import DialogVisiblePdf from '../DraweManagement/components/DialogVisiblePdf';//pdf文件
import LookImgDialog from './component/LookImgDialog'
import { deepDesignConfirmApi } from '@/services/ProjectCenter';
import DeepDesignConfirmDialog from './component/DeepDesignConfirmDialog'
export default {
  components: {
    DialogVisiblePdf,//pdf文件
    LookImgDialog,//查看图片
    DeepDesignConfirmDialog,//深化设计确认
  },
  data () {
    return {
      todosPdf: '',
      dialogVisible: false,//pdf格式的文件弹框
      lookImgDialog: false,
      imgUrl: '',//图片的链接
      objRow: {},
      deepDesignConfimDialog: false,
      tableData: [],
      timeArr: null,
      statusArr: [
        { name: '已确认', value: 1 },
        { name: '未确认', value: 0 }
      ],
      total: 0,
      requestParams: {
        is_page: 1,//是否分页
        page: 1,
        page_size: 10,
        project_id: '',
        create_start_time: '',
        create_end_time: '',
        project_name: '',
        company_name: '',
        status: '',
      }
    }
  },
  methods: {
    onBeforeClose (done) {
      this.todosPdf = '';//重置
      done()
    },
    downFile (url, fileName) {//下载文件
      this.$message.warning('正在下载!')
      console.log('fileName=', fileName, fileName.replace(/\s*/g, ""))
      const link = document.createElement('a');
      link.href = url;
      link.download = fileName.replace(/\s*/g, ""); // 自定义文件名
      link.click() // 下载文件
    },
    downOrLookDrawe (row) {//下载或查看当前文件
      let picUrl = row.pic_url;//当前点击的文件
      var index = picUrl.lastIndexOf('.') // 获取指定字符串最后一次出现的位置，返回index
      var str = picUrl.substr(index + 1) // substr(start, length) 抽取从start下标开始的length个字符，返回新的字符串
      let judgeIsImg = ['png', 'jpg', 'jpeg'].indexOf(str.toLowerCase()) !== -1;
      let judgeIsPdf = ['pdf'].indexOf(str.toLowerCase()) !== -1;//判断是否为pdf文件
      if (judgeIsImg == true && judgeIsPdf == false) {//图片
        this.imgUrl = picUrl;
        this.lookImgDialog = true;
      } else if (judgeIsPdf == true && judgeIsImg == false) {//非图片直接下载
        this.todosPdf = row.pic_url;
        this.dialogVisible = true;
      } else {//非图片直接下载
        this.downFile(picUrl, row.name);
      }
    },
    getIsConfirm (row) {//是否确认
      let isConfirm = 0;
      if (row.status == 1) {
        isConfirm = 1
      };
      return isConfirm;
    },
    catchBackFunc (operaType) {//子组件深化设计确认时执行该事件
      if (operaType != 'back') {
        this.handlePageChange(1);//刷新
      }
    },
    onSearch () {//查询
      this.handlePageChange(1);//刷新
    },
    onReset () {//重置
      this.timeArr = null;
      this.requestParams = this.$options.data().requestParams;//重置
      this.onSearch();//刷新
    },
    handleSizeChange (size) {//当前显示的最大条数
      this.requestParams.page_size = size;
      this.handlePageChange(1);
    },
    // 分页
    handlePageChange (page) {
      this.requestParams.page = page;
      this.getDeepDesignList();//深化设计列表数据
    },
    onTimeChange (timeV) {//日期改变时触发的事件
      this.requestParams.create_start_time = timeV == null ? '' : timeV[0] + ' 00:00:00';
      this.requestParams.create_end_time = timeV == null ? '' : timeV[1] + ' 23:59:59';
    },
    onDeepPaperConfirm (row) {//深化图纸确认
      this.objRow = Object.assign({}, row);//拷贝
      this.deepDesignConfimDialog = true;
    },
    getDeepDesignList () {//获取深化设计列表数据
      deepDesignConfirmApi.getDeepDesignList({
        params: this.requestParams
      }).then((res) => {
        if (res.data) {
          this.tableData = res.data.list;
          this.total = res.data.total_count;//总条数
        }
      }).catch((error) => {
        console.log(error)
      })
    }
  },
  created () {
    let store = this.$store.state.choosedProject
    let local = window.localStorage.getItem('choosedProject') || '{}'

    let choosedProject = store.project_id ? store : JSON.parse(local)
    this.projectList = [choosedProject]
    this.requestParams.project_id = this.projectList[0].project_id

    //切换项目的时候,如果是多选就取第一个项目id
    let chooseList = JSON.parse(window.localStorage.getItem('choosedProjectList')) || '[]'
    if (chooseList.length > 1) {
      let list = chooseList.map(item => item.project_id)
      this.requestParams.project_id = list.join(',')
    }

    this.getDeepDesignList();//获取深化设计列表数据
  },
  mounted () {

  },
  watch: {
    '$store.state.choosedProject': function (val) {
      this.requestParams.project_id = val.project_id
      this.getDeepDesignList()
    },
    //飞轮项目切换时更新列表数据
    '$store.state.choosedProjectList': {
      handler: function (newval) {
        if (newval.list.length > 1) {
          let list = newval.list.map(item => item.project_id)
          this.requestParams.project_id = list.join(',')
          this.getDeepDesignList();
        }
      },
      deep: true
    },


  }
}
</script>

<style lang="scss" scoped>
.deep-design-confirm-container {
  padding: 20px;
  .common-style {
    width: 100% !important;
  }
  .condition-right-button {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
  .none-conf {
    color: red;
  }
  .conf {
    color: green;
  }
}
</style>